<template>
    <el-container class="header">
        <el-image :src="logo" @click="toIndex()"></el-image>
        <ul class="labels">
            <li><a class="is-active" @click="toIndex()">首页</a></li>
            <li>
<!--                <a>专栏</a>-->
            </li>
            <li>
                <el-input placeholder="请输入内容" class="input-with-select">
                    <el-button size="small"  slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </li>
            <li>
                <el-link class="editArticle" icon="el-icon-edit" @click="toEditArticle()">写股文</el-link>
            </li>
            <li>
<!--                <el-link icon="el-icon-document-copy"  @click="toColumnEdit()">开股栏</el-link>-->
            </li>
        </ul>

        <el-button class="login" v-if="!hasLogin" plain round   @click="toLogin()">登录</el-button>
        <el-button class="reg"   v-if="!hasLogin" type="primary" round @click="toReg()">加入</el-button>

        <el-avatar class="login"  :src="user.avatar" v-if="hasLogin" @click.native="toSpace()" ></el-avatar>
        <el-button class="reg" size="small" style="margin-left: 10px;"  v-if="hasLogin" plain round   @click="logout()">退出</el-button>
    </el-container>
</template>

<script>
    export default {
        name: "Nav",
        data() {
            return {
                logo:require("../assets/logo.jpg"),
                user:{},
                hasLogin:!!localStorage.getItem("token"),
            }
        },
        methods:{
            toSpace(){
                this.$router.push({
                    path:"/space",
                    query:{
                        userId:this.user.id,
                    }
                })
            },
            toIndex(){
                this.$router.push("/index")
            },
            toLogin(){
              this.$router.push("/login")
            },
            toReg(){
                this.$router.push("/reg")
            },
            toEditArticle(){
                if(!this.hasLogin){
                    this.$router.push("/login")
                }else{
                    this.$router.push("/edit")
                }
            },
            toColumnEdit(){
                if(!this.hasLogin){
                    this.$router.push("/login")
                }else{
                    this.$router.push("/columnEdit")
                }
            },
            logout(){
                this.hasLogin = false;
                this.$store.commit("REMOVE_INFO");
                this.$router.push("/index");
            }
        },
        created() {
            if(this.$store.getters.getUser) {
                this.user.nickName = this.$store.getters.getUser.nickName
                this.user.avatar = this.$store.getters.getUser.avatar
                this.user.id = this.$store.getters.getUser.id
            }
        }
    }
</script>

<style scoped>
    .header{
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: 1200px;
        height: 60px;
        padding: 0 16px;
        margin: 0 auto;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-transition: -webkit-transform .3s;
        transition: -webkit-transform .3s;
        transition: transform .3s;
        transition: transform .3s,-webkit-transform .3s;
    }

    .labels{
        border-bottom: none;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin: 0 23px;
        padding: 0;
        display: block;
        list-style-type: disc;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        padding-inline-start: 40px;
    }
    .labels li{
        list-style-type: none;
        text-decoration: none;
        color: #8590a6;
        font-size: 15px;
        position: relative;
        display: inline-block;
        padding: 14px 0;
        line-height: 22px;
        text-align: center;
    }

    .labels li a{
        cursor: pointer;
        text-decoration: none;
        position: relative;
        display: inline-block;
        padding: 14px 0;
        font-size: 16px;
        line-height: 22px;
        color: #1a1a1a;
        text-align: center;
        color: #8590a6;
        font-size: 15px;
        margin: 0 23px;
    }

    .labels li  .is-active:after {
        position: absolute;
        right: 0;
        bottom: -1px;
        left: 0;
        height: 3px;
        background: #0084ff;
        content: "";
    }

    .labels li .editArticle{
        margin: 0 30px 0 100px;
    }

    .tx{
        margin: 15px 30px 0 45px;
    }

    .login{
        margin: 0 20px 0 100px ;
    }
</style>
